
<template>
  <div ref="lineChart4" style="background: #fff;height: 100%;width: 100%;position: relative;overflow: hidden;" id="charId4" class="_wz_char">

  </div>
</template>
<script>
export default {
  props: ["charHeight","charId"],
  data() {
    return {}
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var data = [{
      type: '书架',
      value: 48000,
      cat: '家具'
    }, {
      type: '椅子',
      value: 36000,
      cat: '家具'
    }, {
      type: '桌子',
      value: 9000,
      cat: '家具'
    }, {
      type: '复印机',
      value: 30500,
      cat: '技术'
    }, {
      type: '电话',
      value: 22000,
      cat: '技术'
    }, {
      type: '配件',
      value: 12000,
      cat: '技术'
    }, {
      type: '纸张',
      value: 25000,
      cat: '办公用品'
    }, {
      type: '笔',
      value: 17000,
      cat: '办公用品'
    }, {
      type: '美术',
      value: 8000,
      cat: '办公用品'
    }, {
      type: '收纳',
      value: 2000,
      cat: '办公用品'
    }];

    var chart = new G2.Chart({
      container: 'charId4',
      forceFit: true,
      height: 400-51-16-16,
      padding: 'auto'
    });
    chart.source(data);
    chart.scale('value', {
      alias: '占比（%）'
    });
    chart.axis('type', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        }
      },
      tickLine: {
        alignWithLabel: false,
        length: 0
      }
    });

    chart.axis('value', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        },
        formatter: function formatter(text) {
          return text.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
        }
      },
      title: {
        offset: 70
      }
    });
    chart.legend(false);
    chart.interval().position('type*value').color('cat').opacity(1);
    //guide
    chart.guide().text({
      top: true,
      position: ['椅子', 'min'],
      content: '家具',
      style: {
        fill: '#c0c0c0', // 文本颜色
        fontSize: 12, // 文本大小
        fontWeight: '300',
        textAlign: 'center'
      },
      offsetY: 40
    });
    chart.guide().text({
      top: true,
      position: ['电话', 'min'],
      content: '技术',
      style: {
        fill: '#c0c0c0', // 文本颜色
        fontSize: 12, // 文本大小
        fontWeight: '300',
        textAlign: 'center'
      },
      offsetY: 40
    });
    chart.guide().text({
      top: true,
      position: ['笔', 'min'],
      content: '办公用品',
      style: {
        fill: '#c0c0c0', // 文本颜色
        fontSize: 12, // 文本大小
        fontWeight: '300'
      },
      offsetY: 40,
      offsetX: 20
    });
    chart.guide().line({
      start: ['30%', '100%'],
      end: ['30%', '120%'],
      lineStyle: {
        stroke: '#d9d9d9',
        lineDash: [0, 0]
      }
    });
    chart.guide().line({
      start: ['60%', '100%'],
      end: ['60%', '120%'],
      lineStyle: {
        stroke: '#d9d9d9',
        lineDash: [0, 0]
      }
    });
    chart.render();
  },
  methods: {//执行的方法

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
